<template>
    <div class="static">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title" >成交客户统计</h1>
                <span>/ 分析成交客户的各项属性</span>
            </el-col>
        </el-row>
        <!--导航栏-->
   <!--     <div class="nav">
            <div class="nav-item">
                <el-form style="display:inline-block; font-size:12px">
                    <div class="nav-item nav-input" style="border:none">
                        <el-input ></el-input>
                    </div>
                    <div style="display:inline-block;">
                        <el-button class="nav-butt">搜索</el-button>
                    </div>
                </el-form>
            </div>
        </div>-->

        <!--图表-->
        <div class="content">
            <el-tabs v-model="staName2" type="border-card" @tab-click="navClick">
                <el-tab-pane   name="first" index = "1" >
                    <span slot="label"><i class="iconfont icon-kehu">  按客户类型</i></span>
                    <el-row>
                        <statistic-content ></statistic-content>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane  name="second" index = "2"  lazy ><!--lazy延迟渲染-->
                    <span slot="label"><i class="iconfont icon-kehu">  按客户来源</i></span>
                    <el-row>
                            <statistic-content ref="refStatisticContent"></statistic-content>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!--客户销售统计-->
        <div class="content">
            <el-tabs v-model="staName" type="border-card" >
                <el-tab-pane  name="first">
                    <span slot="label" class="salestatic"> 客户销售统计</span>
                    <el-row>
                        <el-col :span="9">
                            <div class="charts"  ref="chart4" > </div>
                        </el-col>
                        <el-col :span="15">
                            <div class="statable">
                                <el-table border :data="staticData"  height="400">
                                    <el-table-column prop="customer_name" label="客户名称" header-align="center" align="center"></el-table-column>
                                    <el-table-column prop="emp_name" label="业务员" header-align="center" align="center"></el-table-column>
                                    <el-table-column prop="oppoNum" label="成交订单数" header-align="center" align="center"></el-table-column>
                                    <el-table-column  label="成交金额" header-align="center" align="center"  >
                                        <template slot-scope="s">
                                            {{s.row.totalMoney == null?'0':s.row.totalMoney }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="回款总金额" header-align="center" align="center">
                                        <template slot-scope="s">
                                            {{s.row.returnMoney == null?'0':s.row.returnMoney }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<script>
    import StatisticContent from "./StatisticContent";
    export default {
        name: "CustomerStatistics",
        components: {StatisticContent},
        data:function () {
            return{
                staName:'first',
                staName2:'first',
                staticData:[],
                chartData:[],
                name:[],//销售额区间数组
                myChart:'',
                option:{
                    title: {
                        text: '销售额区间统计',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: []
                    },
                    series: [
                        {
                            name: '销售额区间介于：',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        },
        methods:{
            navClick(demo){
                    this.$refs.refStatisticContent.getAccordCusType(demo.$attrs.index)
            },
            getTableData(){
                this.axios.get("api/customer/static_sale")
                    .then(v=>{
                        this.staticData = v.data
                        console.log("数据信息");
                        console.log(this.staticData);

                        this.staticData.forEach(res => {
                            if (res.totalMoney  == null){res.totalMoney =0}
                           this.chartData.push(res.totalMoney)
                        })
                        console.log("chardata   ");
                        console.log(this.chartData);
                        let max =Math.max.apply(null,this.chartData)//销售额最大值
                        let min = Math.min.apply(null,this.chartData)//销售额最小值

                        let arv =Math.floor( (max-min)/6)//

                        /*
                        let  = parseFloat(realVal).toFixed(2);*/
                        console.log(arv);
                        console.log("realVal");
                        console.log( );
                        for(let v = 0;v<6;v++){
                            let   middle = min+ arv
                            let nam = min +'~'+ middle+'元'

                            let map ={}
                            let a=0;//计数
                            this.chartData.forEach(res=>{
                                if(res>=min && res<=middle){
                                    a++
                                }
                                map.name= nam
                                map.value = a
                            })
                            this.name.push(map)
                            min = middle
                        }
                       // console.log(this.name);
                        this.myChart.setOption({
                            type:'pie',
                            legend: {
                                data: this.name.map(item => item.name)
                            },
                            series: [{
                                data: this.name
                            }]
                        });

                    }).catch()

            },
            initCharts4 (){
                 this.myChart =  this.$echarts.init(this.$refs.chart4);
                // 绘制图表
                this.myChart.setOption(this.option);
            }
        },
        mounted(){
            this.initCharts4();
        },
        created() {
            this.getTableData();//后台获取数据源
        }
    }
</script>

<style scoped>
    .nav {margin: 20px;background: #fcfbfd;height:auto!important;min-height: 15px;line-height: 45px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .nav .nav-item {display: inline-block;height: 45px;padding: 0px 10px;    border-right: 1px solid #eee;line-height: 45px;}
    .contract_title {display: inline-block;font-weight: unset;margin-left: 20px; }
    .content {margin: 20px;background: #fcfbfd;min-height:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
    .el-col span {color: #b4b4bc;margin-left: 8px}
    .charts{
        width: 100%;
        height: 400px;
        border: 1px solid #e4e7ee;
    }
    .statable{
        margin-left: 20px;
        min-height: 300px;
    }
    .salestatic{
        font-size: large;
        font-weight: bolder;
        color: black;
    }
</style>